<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <!--<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="订单编号" v-model="listQuery.username"></el-input>-->
      <!--<el-select v-model="orderType" placeholder="请选择" style="width: 200px!important;margin-left: 20px;" class="filter-item">-->
        <!--<el-option-->
          <!--v-for="item in typeList"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--<el-button class="filter-item" style="margin-left: 20px;margin-right: 20px;" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>-->
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">

      <el-table-column align="center" label="订单编号">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="服务类型">
        <template slot-scope="scope">
          <span>{{scope.row.serviceType | settleTypeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="数量">
        <template slot-scope="scope">
          <span>{{scope.row.number + scope.row.numberUnit}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="联系人">
        <template slot-scope="scope">
          <span>{{scope.row.contact}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{scope.row.contactPhone}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="发布时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交货日期">
        <template slot-scope="scope">
          <span>{{scope.row.deliveryDate}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="价格状态">
        <template slot-scope="scope">
          <el-tag>{{scope.row.taskStatus | costStatusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="订单状态">
        <template slot-scope="scope">
          <el-tag>{{scope.row.taskStatus | statusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleCheckDetail(scope.row)">查看</el-button>
          <el-button size="small" type="success" @click="handleSendGoods(scope.row)">发货</el-button>
          <!--v-if="scope.row.taskStatus === '3'"-->
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--详情弹窗-->
    <el-dialog title="任务订单详情" :visible.sync="detailDialog">
      <el-form class="clearfix" :model="form" ref="form" label-width="120px">
        <el-form-item label="订单编号：">
          <span class="line-word">{{detail.orderNo}}</span>
        </el-form-item>

        <el-form-item label="订单状态：">
          <span class="line-word">任务中</span>
        </el-form-item>

        <el-form-item label="价格状态：">
          <span class="line-word">已支付</span>
        </el-form-item>

        <el-form-item label="需求类型：">
          <span class="line-word">{{datas.serviceType | settleTypeFilter}}</span>
        </el-form-item>

        <el-form-item label="设计款式：" v-if="datas.serviceType === '1'">
          <span class="line-word">{{detail.designStyle}}</span>
        </el-form-item>

        <el-form-item label="打版款式：" v-if="datas.serviceType === '2'">
          <span class="line-word">{{detail.style}}</span>
        </el-form-item>

        <el-form-item label="打版号码：" v-if="datas.serviceType === '2'">
        <span class="line-word">{{detail.versionNumber}}</span>
        </el-form-item>

        <el-form-item label="做样号码：" v-if="datas.serviceType === '7'">
        <span class="line-word">{{detail.proofingNumber}}</span>
        </el-form-item>

        <el-form-item label="客户地区：" v-if="detail.clientArea">
          <span class="line-word">{{detail.clientArea}}</span>
        </el-form-item>

        <el-form-item label="数量：">
          <span class="line-word">{{detail.number}}{{detail.numberUnit}}</span>
        </el-form-item>

        <el-form-item label="增值需求：" v-if="detail.addValueDemand">
          <span class="line-word">{{detail.addValueDemand}}</span>
        </el-form-item>

        <el-form-item label="发布时间：">
          <span class="line-word">{{detail.createTime}}</span>
        </el-form-item>

        <el-form-item label="任务有效期：">
          <span class="line-word">{{detail.taskValidity}}</span>
        </el-form-item>

        <el-form-item label="交货日期：">
          <span class="line-word">{{detail.deliveryDate}}</span>
        </el-form-item>

        <el-form-item label="需求发布人：">
          <span class="line-word">{{datas.publisherName ? datas.publisherName : '无昵称'}}</span>
        </el-form-item>

        <el-form-item label="发布人电话：">
          <span class="line-word">{{datas.publisherPhone}}</span>
        </el-form-item>

        <el-form-item label="任务联系人：">
          <span class="line-word">{{detail.contact}}</span>
        </el-form-item>

        <el-form-item label="联系人电话：">
          <span class="line-word">{{detail.contactPhone}}</span>
        </el-form-item>

        <el-form-item class="full-line" label="联系地址：">
          <span class="line-word">{{detail.contactAddress}}</span>
        </el-form-item>

        <el-form-item class="full-line" label="图片上传：">
          <span class="line-word clearfix">
            <img class="task-img" @click="handlePictureCardPreview(item)" v-for="(item, index) in imgList" :key="index" :src="item" alt="图片">
          </span>
        </el-form-item>

        <el-form-item class="full-line" label="描述信息：">
          <span class="line-word">{{detail.describtion}}</span>
        </el-form-item>

        <el-form-item class="full-line" label="是否上传附件：">
          <el-radio-group style="vertical-align: top;margin-top: 2px;" v-model="hasFile" size="medium">
            <el-radio label="1" border>否</el-radio>
            <el-radio label="2" border>是</el-radio>
          </el-radio-group>
        </el-form-item>

        <div class="title">费用及审核</div>

        <el-form-item label="报价费用：">
          <el-input type="tel" v-model="offerPrice" placeholder="请输入报价费用（元）"></el-input>
        </el-form-item>

        <el-form-item label="实际费用：">
          <el-input type="tel" v-model="actualPrice" placeholder="请输入实际费用（元）"></el-input>
        </el-form-item>

        <!--<el-form-item class="full-line" label="审核结果：">-->
          <!--<el-radio-group style="vertical-align: top;margin-top: 2px;" v-model="result" size="medium">-->
            <!--<el-radio label="1" border>同意</el-radio>-->
            <!--<el-radio label="2" border>不同意</el-radio>-->
            <!--&lt;!&ndash;<el-radio label="3" border>另推荐</el-radio>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-radio label="4" border>其他</el-radio>&ndash;&gt;-->
          <!--</el-radio-group>-->
        <!--</el-form-item>-->

        <el-form-item class="full-line" label="备注：">
          <el-input v-model="form.note" type="textarea" resize="none" :rows="5" placeholder="请输用审核备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="update('form')">报 价</el-button>
      </div>
    </el-dialog>

    <!--发货弹窗-->
    <el-dialog title="发货" :visible.sync="sendDialog">
      <el-form label-width="100px">
        <el-form-item label="物流方式">
          <el-input v-model="logisticsWay" placeholder="请输入物流方式"></el-input>
        </el-form-item>

        <el-form-item label="物流编号">
          <el-input v-model="logisticsNumber" placeholder="请输入物流编号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSendGoods">取 消</el-button>
        <el-button type="success" @click="sendGoods">发 货</el-button>
      </div>
    </el-dialog>

    <!--图片预览-->
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewImageUrl">
    </el-dialog>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

  </div>
</template>

<script>
  import { queryTaskOrderList, queryTaskOrderDetail, auditTaskOrder, sendTaskGoods } from '@/api/order'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import { mapGetters } from 'vuex'

  export default {
    name: 'task',
    directives: {
      waves
    },
    data() {
      return {
        detailDialog: false, // 详情弹窗显示
        datas: {}, // 详情数据
        detail: {}, // 大师工坊详情
        form: {},
        sendId: '', // 发货信息
        sendDialog: false,
        logisticsWay: '', // 物流方式
        logisticsNumber: '', // 物流编号
        hasFile: '1', // 是否上传附件
        offerPrice: '', // 报价费用
        actualPrice: '', // 实际费用
        costStatus: '', // 价格状态
        imgList: [], // 图片列表
        previewVisible: false, // 图片预览
        previewImageUrl: '', // 图片预览地址
        result: '1', // 审核结果
        list: null, // 列表数据
        total: null, // 总条数
        listLoading: true, // loading
        listQuery: { // 请求参数
          pageNo: 1,
          pageSize: 10
        },
        tableKey: 0
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: '未接单',
          2: '已接单未开始',
          3: '任务中',
          4: '待收货',
          5: '任务已完成',
          6: '任务已过期',
          7: '任务超期'
        }
        return statusMap[status]
      },
      costStatusFilter(status) {
        const statusMap = {
          1: '去报价',
          2: '商议中',
          3: '已支付'
        }
        return statusMap[status] ? statusMap[status] : '无'
      },
      settleTypeFilter(type) {
        const typeMap = {
          1: '设计',
          2: '打版',
          7: '做样'
        }
        return typeMap[type]
      }
    },
    created() {
      this.getList()
      // this.sys_user_add = this.permissions['sys_user_add']
      // this.sys_user_upd = this.permissions['sys_user_upd']
      // this.sys_user_del = this.permissions['sys_user_del']
    },
    methods: {
      getList() {
        // const that = this
        this.listLoading = true
        queryTaskOrderList(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.total
          this.listLoading = false
        })
      },
      handleChangeType() { // 切换类型
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleFilter() { // 搜索
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleSizeChange(val) { // 页面大小切换
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) { // 页码切换
        this.listQuery.pageNo = val
        this.getList()
      },
      handleCheckDetail(row) { // 查看详情
        const that = this
        queryTaskOrderDetail(row.id).then(res => {
          const result = res.data.data
          that.datas = result
          let datas = {}
          if (row.serviceType === '1') {
            datas = result.design
          } else if (row.serviceType === '2') {
            datas = result.playVersion
          } else if (row.serviceType === '7') {
            datas = result.proofing
          }
          that.detail = datas
          that.imgList = that.detail.dataUpload.split(',')
          that.detailDialog = true
        })
      },
      handlePictureCardPreview(url) { // 预览图片
        this.previewImageUrl = url
        this.previewVisible = true
      },
      handleSendGoods(row) { // 发货
        // this.sendId = row.taskOrderId
        this.sendId = row.id
        this.logisticsWay = ''
        this.logisticsNumber = ''
        this.sendDialog = true
      },
      cancelSendGoods() {
        this.sendDialog = false
      },
      sendGoods() { // 确定发货
        if (this.logisticsWay) {
          if (this.logisticsNumber) {
            const params = {
              id: this.sendId,
              logisticsMode: this.logisticsWay,
              logisticsNumber: this.logisticsNumber
            }
            sendTaskGoods(params).then(res => {
              this.$message({
                message: '发货成功',
                type: 'success'
              })
              this.sendDialog = false
              this.getList()
            })
          } else {
            this.$message.error('请输入物流编号')
          }
        } else {
          this.$message.error('请输入物流方式')
        }
      },
      cancel(formName) { // 取消
        this.detailDialog = false
        this.$refs[formName].resetFields()
      },
      update() {
        const param = {
          taskOrderId: this.datas.extId,
          serviceType: this.datas.serviceType,
          costStatus: '2',
          cost: this.offerPrice,
          actualCost: this.actualPrice
        }
        auditTaskOrder(param).then(response => {
          if (response.data.code === '200') {
            this.$message({
              message: '报价成功',
              type: 'success'
            })
          }
          this.cancel('form')
          this.getList()
        })
      },
      deletes(row) {
        this.$confirm(
          '此操作将永久删除, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          console.log(2111)
        })
      }
    }
  }
</script>

<style scoped>
  /*.line-word {*/
    /*padding: 0 15px;*/
  /*}*/
  .image {
    display: inline-block;
    width: 150px;
    margin-right: 30px;
  }
  .el-form-item {
    float: left;
    width: 48% !important;
  }
  .full-line {
    width: 100% !important;
  }
  .task-img {
    float: left;
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .title{
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid #cecece;
    font-weight: bold;
    font-size: 24px;
  }
</style>
